<template>
    <div>
        <!-- 面包导航 -->
        <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
            t2管理
            </el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片主体 -->
        <el-card class="box-card">
            <div class="block">
                <!-- 搜索 -->
                <el-form :inline="true" :model="page" class="demo-form-inline" size="mini">
                    <el-form-item label="姓名">
<el-input v-model="page.params.name" placeholder="请输入姓名" clearable />
</el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="getList" size="mini">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-divider />

                <!-- 表单 -->
                <div style="margin:15px 0px 15px 0">
                    <el-button @click="handleLookAdd" type="primary" size="mini" icon="el-icon-plus"></el-button>
                </div>
                <el-table :data="page.list" border style="width: 100%" height="500">
                    <el-table-column fixed type="index" :index="indexMethod" align="center"></el-table-column>

                    <el-table-column v-if="false" align="center" prop="id" label="ID"></el-table-column>
<el-table-column align="center" prop="name" label="姓名"></el-table-column>
<el-table-column label="图片">
<template slot-scope="scope" v-if="scope.row.img">
<img style="width:30px;height:30px" :src="scope.row.img" />
</template>
</el-table-column>


                    <el-table-column label="操作" width="200" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleLook(scope.row.id)" size="small" type="text">修改</el-button>
                            <el-button @click="handleDelete(scope.row.id)" size="small" type="text" style="color:#F56C6C">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <el-pagination
                        class="pagination"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="page.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.totalCount"
                ></el-pagination>

                <!-- 修改弹窗 -->
                <el-dialog title="t2详情" :visible.sync="dialogFormVisible" @close="cancelBtn">
                    <div style="overflow: auto;height: 60%;width: 70%;margin: 0 auto">
                        <el-form :model="dataList" label-width="80px">
                            <el-form-item label="姓名"><el-input v-model="dataList.name"></el-input></el-form-item>
<el-form-item label="图片">
<el-upload action="api/upload" :headers="headers" :file-list="fileList" list-type="picture-card" :class="{disabled:uploadDisabled}"  :on-remove="handleRemove" :on-success="handlePreview" :limit="1">
<i slot="default" class="el-icon-plus"></i>
</el-upload>
</el-form-item>
                            <el-form-item style="marginTop:20px;text-align: center">
                                  <el-button type="primary" @click="handleUpdate">发布</el-button>
                                  <el-button @click="cancelBtn">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-dialog>

                <!-- 添加弹窗 -->
                <el-dialog title="添加t2" :visible.sync="dialogFormVisible1" @close="cancelBtn">
                    <div style="height: 60%;overflow: auto;width: 70%;margin: 0 auto">
                        <el-form :model="dataList" label-width="80px">
                            <el-form-item label="姓名"><el-input v-model="dataList.name"></el-input></el-form-item>
<el-form-item label="图片">
<el-upload action="api/upload" :headers="headers" :file-list="fileList" list-type="picture-card" :class="{disabled:uploadDisabled}"  :on-remove="handleRemove" :on-success="handlePreview" :limit="1">
<i slot="default" class="el-icon-plus"></i>
</el-upload>
</el-form-item>
                            <el-form-item style="marginTop:20px;text-align: center">
                                      <el-button type="primary" @click="handleAdd">发布</el-button>
                                      <el-button @click="cancelBtns">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-dialog>

            </div>
        </el-card>
    </div>
</template>
<style>
    .disabled .el-upload--picture-card {

        display: none;

    }
</style>

<script>
    import test02Api from "@/api/test02";
    import {Message} from "element-ui";
    import MyEditor from '@/components/myeditor.vue'
    export default {
        data() {
            return {
                uploadDisabled:false,
                headers: {
                    //上传文件的请求头
                    Authorization: this.$store.state.token
                },
                page: {
                    currentPage: 1,
                    pageSize: 10,
                    totalPage: 0,
                    totalCount: 0,
                    params: {},
                    list: []
                },
                dialogFormVisible: false,
                dialogFormVisible1: false,
                dataList: {},
                fileList:[]
            };
        },
        components: {
            MyEditor
        },
        created() {
            this.getList();
        },
        methods: {
            indexMethod(index) {
                return index * 1 + 1;
            },
            getList() {
                test02Api.getList(this.page).then(res => {
                    this.page = res.data.data;
                });
            },
            handleLook(id) {
                this.fileList = []
                test02Api.view(id).then(res => {
                    this.dataList = res.data.data;
                    this.fileList.push({url: this.dataList.img});
                    this.dialogFormVisible = true;
                    this.uploadDisabled = true
                });
            },
            handleUpdate() {
                test02Api.update(this.dataList).then(res => {
                    Message.success(res.message);
                    this.dialogFormVisible = false;
                    this.getList();
                    this.dataList = {};
                });
            },
            cancelBtn() {
                this.dialogFormVisible = false;
                this.dialogFormVisible1 = false;
                this.dataList = {};
                this.fileList = []
            },
            cancelBtns(){
                this.dataList = {};
                this.fileList = []
                this.uploadDisabled = false
            },
            handleAdd() {
                test02Api.add(this.dataList).then(res => {
                    Message.success(res.message);
                    this.dialogFormVisible1 = false;
                    this.getList();
                    this.dataList = {};
                });
            },
            handleLookAdd() {
                this.uploadDisabled = false;
                this.dialogFormVisible1 = true;
            },
            handleDelete(id) {
                this.$confirm("是否刪除这条信息?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "error"
                }).then(() => {
                    test02Api.delete(id).then(res => {
                        Message.success(res.message);
                        this.getList();
                    });
                });
            },
            handleSizeChange(val) {
                this.page.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.getList();
            },
            handlePreview(response, file, fileList) {
                this.dataList.img = response.data.ulr;
                this.fileList.push({url: response.data.ulr});
                this.uploadDisabled = true
            },
            handleRemove(file, fileList) {
                this.fileList.pop()
                this.uploadDisabled = false
            },
        }
    };
</script>